const component_goods_searcher = `
<!-- 商品选择组件 -->
<el-dialog title="选择展示商品" top="25vh" :visible.sync="dialogVisible" width="45%" :modal-append-to-body="false" @close="handleDialogVisibleChange">
    <el-tabs v-model="cargoPage.activeTab">
        <el-tab-pane label="商品列表" name="first">
            <!-- 商品搜索区 -->
            <el-form inline size="mini" :model="cargoDialog" ref="cargoDialogForm">
                <el-form-item label="商品分类" prop="category">
                    <el-cascader v-model="cargoDialog.category" :options="cargoPage.category" :props="cargoPage.categoryProps" @change="handleSelectCategoryChange"></el-cascader>
                </el-form-item>
                
                <el-form-item label="商品品牌" prop="brand_id">
                    <el-select v-model="cargoDialog.brand_id" placeholder="选择商品品牌">
                        <el-option v-for="item in cargoPage.brands" :key="item.brand_id" :label="item.brand_name" :value="item.brand_id"></el-option>
                    </el-select>
                </el-form-item>
                
                <el-form-item label="商品名称" prop="goods_name">
                    <el-input v-model="cargoDialog.goods_name" placeholder="商品名称搜索"></el-input>
                </el-form-item>
                
                <el-form-item label="商品价格" prop="min_price">
                    <el-row>
                        <el-col :span="11">
                            <el-input v-model="cargoDialog.min_price" placeholder="最低价格"></el-input>
                        </el-col>
                        <el-col :span="1" style="text-align: center;">--</el-col>
                        <el-col :span="11">
                            <el-input v-model="cargoDialog.max_price" placeholder="最高价格"></el-input>
                        </el-col>
                    </el-row>
                </el-form-item>
                
                <el-form-item>
                    <el-button type="primary" plain @click="resetCargoSelectForm">重置</el-button>
                    <el-button type="primary" @click="searchCargos">搜索</el-button>
                </el-form-item>
            </el-form>

            <!-- 商品展示区 -->
            <el-table v-loading="loading" :data="cargoPage.tableData" ref="cargoSelectTable" row-key="sku_id" reserve-selection max-height="370" @select="handleCargoSelect" @select-all="handleCargoSelect">
                <el-table-column type="selection"></el-table-column>
                <el-table-column label="产品信息" prop="sku_name"></el-table-column>
                <el-table-column label="价格" prop="price"></el-table-column>
                <el-table-column label="库存" prop="stock"></el-table-column>
            </el-table>

            <el-pagination :current-page="cargoPage.currentPage" @current-change="handleCurrentChange" hide-on-single-page :total="cargoPage.total" layout="prev, pager, next"></el-pagination>
        </el-tab-pane>
        <el-tab-pane label="已选商品" name="second">
            <span slot="label">
                <span>已选商品</span>
                <span v-if="selectedCount" style="border-radius:30%;background-color:#E6A23C;padding: 0 5px;">{{selectedCount}}</span>
            </span>

            <!-- 商品展示区 -->
            <el-table :data="selectedCargos" max-height="320">
                <el-table-column label="产品信息" prop="sku_name"></el-table-column>
                <el-table-column label="价格" prop="price"></el-table-column>
                <el-table-column label="库存" prop="stock"></el-table-column>
                <el-table-column label="移出">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="removeSelect(scope.row)">移出</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-tab-pane>
    </el-tabs>

    <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false" size="small">确 定</el-button>
    </span>
</el-dialog>
`

Vue.component('goods-searcher', {
    props: {
        visible: false,
        title: '选择展示商品',
        maxselect: {
            default: 6,
        },
    },
    data: function () {
        return {
            selectedCount: 0,
            loading: false,
            dialogVisible: false,
            selectedCargos: [],
            cargoPage: {
                currentPage: 1,
                total: 10,
                tableData: [],
                category: [],
                brands: [],
                activeTab: 'first',
                categoryProps: {
                    label: 'category_name',
                    value: 'category_id',
                    checkStrictly: true,
                    lazy: true,
                    lazyLoad(node, resolve) {
                        const that = this
                        $.ajax({
                            url: ns.url('admin/goodscategory/getCategoryList'),
                            data: { pid: node.data.category_id },
                            type: 'POST',
                            dataType: 'JSON',
                            success: function (res) {
                                if (resolve) {
                                    return resolve(res.data)
                                }
                                that.cargoDialog.category = res.data
                            },
                            error: function (err) {
                                that.loading = false
                            },
                        })
                    },
                },
            },
            // 商品选择弹窗配置
            cargoDialog: {
                category: [],
                brand_id: '',
                goods_name: '',
                max_price: '',
                min_price: '',
            },
        }
    },
    created: function () {
        this.getBrandList()
        this.getCategorys()
    },
    methods: {
        searchCargos() {
            var categoryId = 0,
                category_level = 0
            if (this.cargoDialog.category && this.cargoDialog.category.length > 0) {
                categoryId = this.cargoDialog.category[this.cargoDialog.category.length - 1]
                category_level = this.cargoDialog.category.length
            }

            var params = {}
            if (categoryId) params = { category_id: categoryId, category_level }
            if (this.cargoDialog.goods_name) params.goods_name = this.cargoDialog.goods_name
            if (this.cargoDialog.max_price) params.max_price = this.cargoDialog.max_price
            if (this.cargoDialog.min_price) params.min_price = this.cargoDialog.min_price
            if (this.cargoDialog.brand_id) params.brand_id = this.cargoDialog.brand_id

            const that = this
            that.loading = true
            const { category_id, goods_name, max_price, min_price, brand_id } = params
            $.ajax({
                url: ns.url('admin/goods/skulists'),
                data: {
                    page: that.cargoPage.currentPage,
                    category_id,
                    category_level,
                    goods_name,
                    max_price,
                    min_price,
                    brand_id,
                },
                type: 'POST',
                dataType: 'JSON',
                success: function (res) {
                    if (res.code == 0) {
                        res.data.list.forEach(item => {
                            item.image_url_real = ns.img(item.sku_image)
                            item.image_url = item.sku_image
                        })
                        that.cargoPage.tableData = res.data.list
                        that.cargoPage.total = res.data.count
                        that.loading = false
                    }
                },
                error: function (err) {
                    that.loading = false
                },
            })
        },
        handleCurrentChange(page) {
            this.cargoPage.currentPage = page
            this.searchCargos()
        },
        handleDialogVisibleChange() {
            this.dialogVisible = false
            this.$emit('visible-change', false)
        },
        // 获取全部品牌
        getBrandList() {
            const that = this
            $.ajax({
                url: ns.url('admin/goodsbrand/lists'),
                data: { page_size: 1000000, page: 1 },
                type: 'POST',
                dataType: 'JSON',
                success: function (res) {
                    if (res.code == 0) {
                        that.cargoPage.brands = res.data.list
                    }
                },
                error: function (err) {
                    that.loading = false
                },
            })
        },
        // 商品分类选择改变
        handleSelectCategoryChange(node, that) {
            this.cargoDialog.category
        },
        resetCargoSelectForm() {
            this.$refs['cargoDialogForm'].resetFields()
            this.cargoDialog.max_price = ''
        },
        // 选中商品
        handleCargoSelect(selection, row) {
            // 全选 / 取消全选
            if (!row) {
                if (selection.length == 0) {
                    // 取消全选
                    this.cargoPage.tableData.forEach(item => {
                        const tmpIndex = this.selectedCargos.findIndex(cargo => {
                            return cargo.sku_id == item.sku_id
                        })
                        if (tmpIndex != -1) {
                            this.selectedCargos.splice(tmpIndex, 1)
                        }
                    })
                } else {
                    // 全选
                    this.cargoPage.tableData.forEach(item => {
                        const tmpIndex = this.selectedCargos.findIndex(cargo => {
                            return cargo.sku_id == item.sku_id
                        })
                        if (tmpIndex == -1) {
                            if (this.selectedCargos.length < this.maxselect) this.selectedCargos.push(item)
                            else selection.splice(this.maxselect, selection.length - this.maxselect)
                        }
                    })
                }
            } else {
                const index = selection.indexOf(row)
                const tmpIndex = this.selectedCargos.findIndex(cargo => {
                    return cargo.sku_id == row.sku_id
                })
                if (index == -1 && tmpIndex != -1) {
                    // 取消选择
                    this.selectedCargos.splice(tmpIndex, 1)
                    return this.onConfigChanged()
                } else if (index != -1 && tmpIndex == -1) {
                    if (this.selectedCargos.length < this.maxselect) this.selectedCargos.push(row)
                    else {
                        selection.splice(index, 1)
                        this.$refs.cargoSelectTable.toggleRowSelection(row, false)
                    }
                }
            }
        },

        removeSelect(cargo) {
            const index = this.selectedCargos.indexOf(cargo)
            if (index != -1) this.selectedCargos.splice(index, 1)
        },

        // 获取商品分类列表
        getCategorys(pid = 0, resolve) {
            const that = this
            $.ajax({
                url: ns.url('admin/goodscategory/getCategoryList'),
                data: { pid },
                type: 'POST',
                dataType: 'JSON',
                success: function (res) {
                    if (resolve) {
                        return resolve(res.data)
                    }
                    that.cargoPage.category = res.data
                },
                error: function (err) {
                    that.loading = false
                },
            })
        },
    },
    watch: {
        visible: function (curr) {
            this.dialogVisible = curr
            this.$emit('visible-change', curr)
        },
        selectedCargos: function (curr) {
            this.selectedCount = curr.length
            this.$emit('change', curr)
        },
    },
    template: component_goods_searcher,
})
